<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>待办任务列表</title>
  <style>
    #app {
      width: 800px;
      margin: 0 auto;
      padding: 10px;
      border: 1px solid #ccc;
    }

   .content {
      width: 700px;
      margin: 0 auto;
    }

   .title {
      text-align: center;
    }

   .btn {
      height: 40px;
      width: 100px;
      margin-left: 10px;
      padding: 5px 10px;
      border: 1px solid #ccc;
      border-radius: 5px;
      background-color: #fff;
      cursor: pointer;
    }

   .all-count {
      background-color: #1363e3;
      color: #fff;
      padding: 10px 10px;
      border-radius: 5px;
    }

   .unfinish-count {
      background-color: #f4ad07;
      color: #fff;
      padding: 10px 10px;
      border-radius: 5px;
    }

   .task-input {
      width: 430px;
      height: 30px;
      padding: 5px 10px;
      border: 1px solid #ccc;
      border-radius: 5px;
      background-color: #fff;
      font-size: 16px;
    }

   .task-list {
      border-radius: 5px;
      list-style: none;
      padding: 0px;
    }

   .task-list li {
      padding: 5px;
      border: 1px solid #ccc;
      margin-top: 3px;
      border-radius: 5px;
      height: 40px;
      line-height: 40px;
    }
   .ckbox {
      width: 16px;
      height: 16px;
      cursor: pointer;
    }
   .done {
      text-decoration: line-through;
      color: #fff;
      background-color: green;
    }

   .normal {
      color: #000;
      background-color: #fff;
    }
  </style>
</head>
<body>
  <div id="app">
    <h1 class="title">我的待办任务</h1>
    <div class="content">
      <p>
        <span class="all-count">任务总数：{{ taskList.length }} 个</span>
        <span class="unfinish-count">未完成：{{ unDoneCount() }} 个</span>
      </p>
      <p>
        <input class="task-input" placeholder="请输入新待办任务" v-model="newTask" type="text" />
        <button class="btn" @click="addTask">添加任务</button>
        <button class="btn" @click="clearCompleted">清除已完成</button>
      </p>
      <p>
        <h3>任务列表</h3>
      </p>
      <ul class="task-list">
        <li v-for="(task, index) in taskList" :class="{ done: task.done, normal:!task.done }" :key="index">
          <input type="checkbox" class="ckbox" v-model="task.done" @change="updateTaskStatus(task, index)">
          <input type="text" class="task-input" v-if="task.editMode" v-model="task.content" @blur="saveTask(task, index)" />
          <span v-else @click="editTask(task, index)">{{ task.content }}</span>
        </li>
      </ul>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
  <script>
    new Vue({
      el: '#app',
      data: {
        taskList: [
          { content: '学习Vue', done: false, editMode: false },
          { content: '学习React', done: true, editMode: false },
          { content: '学习Angular', done: false, editMode: false }
        ],
        newTask: ''
      },
      methods: {
        addTask() {
          if (this.newTask) {
            this.taskList.push({ content: this.newTask, done: false, editMode: false });
            this.newTask = '';
          }
        },
        editTask(task, index) {
          task.editMode = true;
        },
        saveTask(task, index) {
          task.editMode = false;
        },
        updateTaskStatus(task, index) {
          if (task.done) {
            this.taskList[index].classList.remove('normal');
            this.taskList[index].classList.add('done');
          } else {
            this.taskList[index].classList.remove('done');
            this.taskList[index].classList.add('normal');
          }
        },
        clearCompleted() {
          this.taskList = this.taskList.filter(task =>!task.done);
        },
        unDoneCount() {
          return this.taskList.filter(task =>!task.done).length;
        }
      }
    });
  </script>
</body>
</html>